<!--
  ~ This program is part of the OpenLMIS logistics management information system platform software.
  ~ Copyright © 2013 VillageReach
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~  
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
  -->

<div ng-hide="rights && role" openlmis-message="msg.loading"></div>
<div ng-show="rights && role">
  <div ng-hide="role.id">
    <h2 id="addNewRoleHeader" openlmis-message="create.role.addNew"></h2>
  </div>
  <div ng-show="role.id">
    <h2 id="editRoleHeader" openlmis-message="edit.role.edit"></h2>
  </div>

  <form ng-submit="saveRole()" id="create-role" name="roleForm" novalidate>
    <div class="app-form roles-form" tab-scroll>
      <div class="row-fluid clearfix">
        <div class="span5">
          <label id="roleNameLabel" for="name">
            <span openlmis-message="create.role.roleName"></span>
            <span class="label-required">*</span>
          </label>

          <input ng-model="role.name" name="name" id="name" type="text" maxlength="50" ng-required="true"/>
          <span class="field-error" ng-show="roleForm.name.$error.required && showError"
                openlmis-message="missing.value">
          </span>
        </div>
      </div>

      <div class="row-fluid clearfix">
        <div class="span5">
          <label id="roleDescriptionLabel" for="description" openlmis-message="create.role.description"></label>
          <input ng-model="role.description" name="description" id="description" type="text" maxlength="250"/>
        </div>
      </div>

      <div class="form-group clearfix">
        <h3 id="assignRightsLabel">
          <span openlmis-message="create.role.assignRights"></span>
          <span class="label-required">*</span>
        </h3>

        <label id="roleMixedWarning" class="role-mixed-warning">
          <span class="roles-note" openlmis-message="create.role.mixed.warning"></span>
        </label>

        <div class="row-fluid">
          <div class="span12">
            <table id="rightsTable" class="rights-table table table-bordered">
              <thead>
                <tr>
                  <th ng-show='adminRights.length' ng-click='showRoleTypeModal("ADMIN")'>
                    <div class="form-inline" ng-class="{'is-selected': currentRightType == 'ADMIN'}">
                      <label id="adminRoleType">
                        <h4 openlmis-message="create.role.adminRights"></h4>
                      </label>
                    </div>
                  </th>
                  <th ng-show='reportRights.length' ng-click='showRoleTypeModal("REPORT")'>
                    <div class="form-inline" ng-class="{'is-selected': currentRightType == 'REPORT'}">
                      <label id="reportRoleType">
                        <h4 openlmis-message="create.role.report.rights"></h4>
                      </label>
                    </div>
                  </th>
                  <th ng-show='reportingRights.length' ng-click='showRoleTypeModal("REPORTING")'>
                    <div class="form-inline" ng-class="{'is-selected': currentRightType == 'REPORTING'}">
                      <label id="reportingRoleType">
                        <h4 openlmis-message="create.role.reporting.rights"></h4>
                      </label>
                    </div>
                  </th>
                  <th ng-show='allocationRights.length' ng-click='showRoleTypeModal("ALLOCATION")'>
                    <div class="form-inline" ng-class="{'is-selected': currentRightType == 'ALLOCATION'}">
                      <label id="allocationRoleType">
                        <h4 openlmis-message="label.allocation.program.rights"></h4>
                      </label>
                    </div>
                  </th>
                  <th ng-show='requisitionRights.length' ng-click='showRoleTypeModal("REQUISITION")'>
                    <div class="form-inline" ng-class="{'is-selected': currentRightType == 'REQUISITION'}">
                      <label id="requisitionRoleType">
                        <h4 openlmis-message="label.request.program.rights"></h4>
                      </label>
                    </div>
                  </th>
                  <th ng-show='fulfillmentRights.length' ng-click='showRoleTypeModal("FULFILLMENT")'>
                    <div class="form-inline" ng-class="{'is-selected': currentRightType == 'FULFILLMENT'}">
                      <label id="fulfillmentRoleType">
                        <h4 openlmis-message="label.fulfillment.based.rights"></h4>
                      </label>
                    </div>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td ng-show='adminRights.length' ng-class="{'is-disabled': currentRightType != 'ADMIN'}">
                    <div id="rights-{{right.name}}" class="checkbox-list clearfix"
                         ng-repeat="right in adminRights" tab-scroll>
                      <input id="{{right.name}}" type="checkbox"
                             ng-click="updateRights(right)"
                             ng-model="right.selected"
                             ng-checked="false"
                             ng-disabled="areRelatedFieldsSelected(right) || currentRightType != 'ADMIN'"/>
                      <label for="{{right.name}}" openlmis-message="right.displayNameKey"></label>
                    </div>
                    <span class="field-error" ng-show="showRightError && currentRightType=='ADMIN'"
                          openlmis-message="create.role.selectRightWarning">
                    </span>
                  </td>

                  <td ng-show='reportRights.length' ng-class="{'is-disabled': currentRightType != 'REPORT'}">
                    <div id="reportRights-{{reportRight.name}}" class="checkbox-list clearfix"
                         ng-repeat="reportRight in reportRights" tab-scroll>
                      <input id="{{reportRight.name}}" type="checkbox"
                             ng-click="updateRights(reportRight)"
                             ng-model="reportRight.selected"
                             ng-checked="false">
                      <label for="{{reportRight.name}}">
                        <span ng-if="reportRight.name === 'MANAGE_REPORT'"
                              openlmis-message="reportRight.displayNameKey"></span>

                        <span ng-if="reportRight.name !== 'MANAGE_REPORT'">
                          <span openlmis-message="reportRight.displayNameKey"></span>
                        </span>
                      </label>
                    </div>
                    <span class="field-error" ng-show="showRightError && currentRightType=='REPORT'"
                          openlmis-message="create.role.selectRightWarning">
                    </span>
                  </td>

                  <td ng-show='reportingRights.length' ng-class="{'is-disabled': currentRightType != 'REPORTING'}">
                    <div id="reportingRights-{{reportingRight.name}}" class="checkbox-list clearfix"
                         ng-repeat="reportingRight in reportingRights" tab-scroll>
                      <input id="{{reportingRight.name}}" type="checkbox"
                             ng-click="updateRights(reportingRight)"
                             ng-model="reportingRight.selected"
                             ng-checked="false">
                      <label for="{{reportingRight.name}}">
                        <span ng-if="reportingRight.name === 'MANAGE_REPORT'"
                              openlmis-message="reportingRight.displayNameKey"></span>

                        <span ng-if="reportingRight.name !== 'MANAGE_REPORT'">
                          <span openlmis-message="label.reporting.right.view"></span>
                          <span ng-bind="reportingRight.name"></span>
                        </span>
                      </label>
                    </div>
                    <span class="field-error" ng-show="showRightError && currentRightType=='REPORTING'"
                          openlmis-message="create.role.selectRightWarning">
                    </span>
                  </td>

                  <td ng-show='allocationRights.length' ng-class="{'is-disabled': currentRightType != 'ALLOCATION'}">
                    <div id="allocationRights-{{allocationRight.name}}" class="checkbox-list clearfix"
                         ng-repeat="allocationRight in allocationRights" tab-scroll>
                      <input id="{{allocationRight.name}}" type="checkbox"
                             ng-click="updateRights(allocationRight)"
                             ng-model="allocationRight.selected"
                             ng-checked="false"
                             ng-disabled="areRelatedFieldsSelected(allocationRight) || currentRightType != 'ALLOCATION'"/>
                      <label for="{{allocationRight.name}}" openlmis-message="allocationRight.displayNameKey"></label>
                    </div>
                    <span class="field-error" ng-show="showRightError && currentRightType=='ALLOCATION'"
                          openlmis-message="create.role.selectRightWarning">
                    </span>
                  </td>

                  <td ng-show='requisitionRights.length' ng-class="{'is-disabled': currentRightType != 'REQUISITION'}">
                    <div id="requisitionRights-{{requisitionRight.name}}" class="checkbox-list clearfix"
                         ng-repeat="requisitionRight in requisitionRights" tab-scroll>
                      <input id="{{requisitionRight.name}}" type="checkbox"
                             ng-click="updateRights(requisitionRight)"
                             ng-model="requisitionRight.selected"
                             ng-checked="false"
                             ng-disabled="areRelatedFieldsSelected(requisitionRight) || currentRightType != 'REQUISITION'"/>
                      <label for="{{requisitionRight.name}}" openlmis-message="requisitionRight.displayNameKey"></label>
                    </div>
                    <span class="field-error" ng-show="showRightError && currentRightType=='REQUISITION'"
                          openlmis-message="create.role.selectRightWarning">
                    </span>
                  </td>

                  <td ng-show='fulfillmentRights.length' ng-class="{'is-disabled': currentRightType != 'FULFILLMENT'}">
                    <div id="fulfillmentRights-{{fulfillmentRight.name}}" class="checkbox-list clearfix"
                         ng-repeat="fulfillmentRight in fulfillmentRights" tab-scroll>
                      <input id="{{fulfillmentRight.name}}" type="checkbox"
                             ng-click="updateRights(fulfillmentRight)"
                             ng-model="fulfillmentRight.selected"
                             ng-checked="false"
                             ng-disabled="areRelatedFieldsSelected(fulfillmentRight) || currentRightType != 'FULFILLMENT'"/>
                      <label for="{{fulfillmentRight.name}}" openlmis-message="fulfillmentRight.displayNameKey"></label>
                    </div>
                    <span class="field-error" ng-show="showRightError && currentRightType=='FULFILLMENT'"
                          openlmis-message="create.role.selectRightWarning">
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div form-toolbar id="action_buttons" class="action-buttons">
      <div class="form-cell button-row">
        <input id="saveButton" type="submit" class="btn btn-primary save-button" openlmis-message="button.save"/>
        <a id="cancelButton" ng-href="#/list" class="btn btn-cancel submit-button" openlmis-message="button.cancel"></a>
      </div>
      <div class="toolbar-error" id="saveFailMessage" openlmis-message="error" ng-show="error"></div>
    </div>
  </form>
</div>
